<template>
    <div id="product" v-if="Object.keys(productInfo).length">
        <van-nav-bar
            title="产品详情"
            left-text="返回"
            left-arrow
            @click-left="onClickLeft"
        />
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item
                v-for="item in productInfo.product_images"
                :key="item.id"
            >
                <img
                    :src="'http://localhost:3000/' + item.url"
                    style="width: 100%; height: 300px"
                    alt=""
                />
            </van-swipe-item>
        </van-swipe>
        <div>
            <div
                style="
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding: 10px 14px 5px 14px;
                    font-size: 24px;
                    color: #222;
                    font-weight: 700;
                "
            >
                <span>{{ productInfo.title }}</span>
                <span style="color: red">￥{{ productInfo.price }}</span>
            </div>
            <div style="padding: 0 16px 14px 16px">
                <van-tag
                    style="margin: 0 4px"
                    v-for="item in productInfo.product_labels"
                    mark
                    type="primary"
                >
                    {{ item.name }}
                </van-tag>
            </div>
            <div
                v-html="productInfo.detail"
                style="padding: 0 18px; color: #666; font-size: 18px"
            ></div>
            <div
                style="
                    padding: 0 10px;
                    margin: 12px 0;
                    font-size: 18px;
                    font-weight: 700;
                "
            >
                其他产品
            </div>
            <Waterfall
                :list="products"
                :breakpoints="{
                    1200: { rowPerView: 3 },
                    800: { rowPerView: 2 },
                    500: { rowPerView: 2 },
                }"
            >
                <template #item="{ item }">
                    <div
                        class="water-container"
                        @click="handleToProduct(item.id)"
                    >
                        <LazyImg
                            :url="
                                'http://localhost:3000/' +
                                item.product_images[0].url
                            "
                        />
                        <p class="water-title">{{ item.title }}</p>
                        <p
                            style="
                                padding: 4px 8px;
                                display: flex;
                                justify-content: end;
                            "
                            v-if="item.product_labels.length"
                        >
                            <van-tag
                                style="margin: 0 4px"
                                v-for="labels in item.product_labels"
                                type="warning"
                            >
                                {{ labels.name }}
                            </van-tag>
                        </p>
                    </div>
                </template>
            </Waterfall>
        </div>
        <van-action-bar>
            <van-action-bar-icon
                icon="cart-o"
                text="购物车"
                @click="handleToCart"
            />
            <van-action-bar-button
                type="warning"
                text="加入购物车"
                @click="handleAddCart"
            />
            <van-action-bar-button
                type="danger"
                text="立即购买"
                @click="handleBuy"
            />
        </van-action-bar>

        <van-action-sheet
            v-model:show="positionAction.show"
            title="选择收货地址"
        >
            <div style="padding: 40px 20px">
                <div
                    v-for="item in positions"
                    :key="item.id"
                    style="border-bottom: 1px solid #eee; padding-bottom: 10px"
                    @click="handleAddOrder(item)"
                >
                    {{ item.position }}
                </div>
            </div>
        </van-action-sheet>

        <van-action-sheet v-model:show="rentAction.show" title="选择租借类型">
            <div class="rent-box">
                <div @click="handleAddRent(10)">10元/天</div>
                <div @click="handleAddRent(290)">290元/月</div>
                <div @click="handleAddRent(990)">990元/3月</div>
                <div @click="handleAddRent(1899)">1899元/6月</div>
                <div @click="handleAddRent(2999)">2999元/9月</div>
                <div @click="handleAddRent(4000)">4000元/年</div>
            </div>
        </van-action-sheet>
    </div>
</template>

<script setup>
import { computed, getCurrentInstance, onMounted, ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";
import { getProductById, getProductByShopId } from "@/api/basic";
import { showToast, Toast } from "vant";
import dayjs from "dayjs";

const { appContext } = getCurrentInstance();
const { apiUrl } = appContext.config;
const router = useRouter();
const route = useRoute();
const store = useStore();
const productInfo = ref({});
const products = ref([]);

const positionAction = ref({
    show: false,
});

const rentAction = ref({
    show: false,
    price: "",
});

onMounted(() => {
    getProductInfo();
});

watch(
    () => route.query.id,
    () => {
        if (route.query.id) {
            window.scrollTo({ top: 0 });
            getProductInfo();
        }
    }
);

watch(
    () => positionAction.value.show,
    () => {
        if (!positionAction.value.show) {
            rentAction.value.price = "";
        }
    }
);

const userInfo = computed(() => {
    return store.getters.userInfo;
});

const positions = computed(() => {
    return store.getters.positions;
});

const getProductInfo = async () => {
    const { code, message, result } = await getProductById({
        id: route.query.id,
    });
    if (code != 200) {
        showToast(message);
        return;
    }
    productInfo.value = result;
    getProductList();
};

const getProductList = async () => {
    const { code, message, result } = await getProductByShopId({
        id: productInfo.value.typeId,
    });
    if (code != 200) {
        showToast(message);
        return;
    }
    products.value = result.filter((ele) => ele.id != productInfo.value.id);
};

const handleToProduct = (id) => {
    router.replace({
        path: "/product",
        query: {
            id,
        },
    });
};

const handleToCart = () => {
    router.push({
        path: "/cart",
    });
};

const handleToShop = () => {
    router.push({
        path: "/shop",
        query: {
            id: productInfo.value.shopId,
        },
    });
};

const handleAddCart = () => {
    store.commit("ADD_CARTS", productInfo.value);
    showToast("已加入购物车");
};

const handleRent = async () => {
    if (!Object.keys(userInfo.value).length) {
        showToast("未登录");
        return;
    }
    rentAction.value.show = true;
};

const handleAddRent = async (price) => {
    rentAction.value.price = price;
    rentAction.value.show = false;

    positionAction.value.show = true;
};

const handleBuy = async () => {
    if (!Object.keys(userInfo.value).length) {
        showToast("未登录");
        return;
    }

    positionAction.value.show = true;
};

const handleAddOrder = async (item) => {
    if (!rentAction.value.price) {
        const { code, message, result } = await addOrder({
            productId: productInfo.value.id,
            userId: userInfo.value.id,
            price: productInfo.value.price,
            returnUrl: "http://localhost:8888",
            position: item.position,
        });
        if (code != 200) {
            showToast(message);
            return;
        }
        showToast("购买成功");
        window.open(result);
        positionAction.value.show = false;
    } else {
        const { code, message, result } = await addRent({
            productId: productInfo.value.id,
            userId: userInfo.value.id,
            price: rentAction.value.price,
            returnUrl: "http://localhost:8888",
            position: item.position,
        });
        if (code != 200) {
            showToast(message);
            return;
        }
        window.open(result);
        showToast("等待管理员审核");
        positionAction.value.show = false;
        rentAction.value.price = "";
    }
};

const onClickLeft = () => {
    router.back();
};
</script>
<style scoped>
#product {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.water-container {
    border-radius: 6px;
    box-shadow: 0 0 6px 1px #999;
    overflow: hidden;
}

.water-title {
    padding: 6px 10px;
    color: #222;
}

.rent-box {
    padding: 20px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.rent-box div {
    background-color: crimson;
    color: #fff;
    padding: 5px;
    margin: 5px;
}
</style>
